<template>
	<view class="orderdetail">
		
		<view class="orderdetail-head">
			<view class="orderdetail-head-btn">
				<view class="btn1" :style="style1"  @click="btn1">进行中</view>
				<view class="btn2" :style="style2" @click="btn2">历史</view>
				<view class="box"></view>
			</view>
		</view>
		<view class="orderdetail-body">
			<component :is="component"></component>
		</view>
	</view>
</template>

<script>
	import Dorderdetail from "@/components/Dorderdetail/Dorderdetail.vue"
	import Dorderdetail2 from "@/components/Dorderdetail/Dorderdetail2.vue"
	import {shallowRef} from "vue";
	const D1= shallowRef(Dorderdetail)
	const D2=shallowRef(Dorderdetail2)
	export default {
		data() {
			return {
				component:D1,
				style1:'border-bottom: 4rpx solid red;',
				style2:''
			}
		},
		comments:{
			Dorderdetail:D1,
			Dorderdetail2:D2
		},
		methods: {
			btn1(){
				this.component=D1,
				this.style2=''
				this.style1='border-bottom: 4rpx solid red;'
			},
			btn2(){
				this.component=D2
				this.style1=''
				this.style2='border-bottom: 4rpx solid red;'
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
	}
.orderdetail{
	margin:0 20rpx;
	padding: 20rpx;
	
} 
 .orderdetail-head{
	
 }
   .orderdetail-head-btn{
	   width: 100wv;
	   display: flex;
	   justify-content: space-evenly;
	   align-items: center;
		background-color: #fff;
   }
   .btn1,.btn2{
	   width: 200rpx;
	   height: 50rpx;
	   text-align: center;
	   line-height: 50rpx;
	   color: #777;
	   background-color: #fff;
	   font-size: 32rpx;
   }
   .active{
	   border-bottom: 2px solid red;
   }
   
   .orderdetail-body{
	   margin-top: 20rpx;
   }
  
</style>
